<template>
	<div id="userLive" class="userLive w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}的课程列表</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listTwo advise" @click="userLubo">录播课程</a>
				<a class="listOne">直播课程</a>
				<a class="listTwo advise" @click="knowMap">知识地图</a>
				<a class="listTwo advise" @click="courseHomework">学员作业</a>
				<a class="listTwo advise" @click="userTask">学习任务</a>
			</div>
			<div class="el-tabs-report">
				<el-cascader v-model="searchSelect" :options="options" :props="optionProps" :show-all-levels='false' filterable placeholder="课程分类" @change="getTableList" class="th_3"></el-cascader>
				<el-select v-model="isRequired" @change="getTableList" class="th_2">
					<el-option label="课程属性" value=""></el-option>
					<el-option label="必修课" value="1"></el-option>
					<el-option label="选修课" value="2"></el-option>
				</el-select> 
				<div class="msearch">
					<input placeholder="请输入关键词……" v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column label="序号" width="55">
					<template slot-scope="scope">{{scope.row.sort}}</template>
				</el-table-column>
				<el-table-column prop="courseName" label="直播课程名称"></el-table-column>
				<el-table-column prop="lecturerName" label="讲师" width="100"></el-table-column>
				<el-table-column label="课程数据" width="100">
					<template slot-scope="scope">
						<el-button @click="handleData(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
				<el-table-column label="课件组数据" width="100">
					<template slot-scope="scope">
						<el-button @click="handleWareData(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="加入课程时间" width="170"></el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
			<!--课件组数据-->
			<div class="echartData" v-show="echartsPopup">
				<a @click="echartDataClose" class="echartDataClose">&#10005;</a>
				<p>{{echarts_people}}的直播课程学习数据</p>
				<p>课程名称：{{echarts_courseName}}</p>
				<p>课件组数据：</p>
				<ul class="echartsContainer clearFix">
					<li><el-progress type="circle" :percentage="learningprogress"></el-progress><b>完课率</b></li>
					<li><el-progress type="circle" :percentage="chaozongxueyuanbi"></el-progress><b>超总学员比</b></li>
					<li><el-progress type="circle" :percentage="wanchenglv"></el-progress><b>活跃率</b></li>
				</ul>
				<div :style="{width: '360px', height: '250px','marginTop':'-50px','marginLeft':'15px'}" ref="echarts"></div>
			</div>
		</div>
	</div>
</template>
<script>
	import echarts from 'echarts';
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				sort:'',
				updateTitle:'',
				userid:'', //从讲师页面带过来的id
				userLive:'',
				search: "",
				tableData: [],
				searchSelect:[],
				options: [],
				optionProps: {
                    value: 'id',
                    label: 'columnName',
                    children: 'childList'
                },
				isRequired:'',
//				课件组数据弹窗
				echartsPopup:false,
				echarts_people:'',
				echarts_courseName:'',
				learningprogress:0,
				chaozongxueyuanbi:0,
				wanchenglv:0,
				echartsData:[],
//				end
				pagesize: 15,
				currentpage: 1,
				total: 1,
				multipleSelection: [],
				deleteType:'delete'
			}
		},
		methods: {
			getParams() {
				let that = this;
				this.updateTitle = this.$route.params.updateTitle;
				this.userid = this.$route.params.userid;
				this.dataId = this.$route.params.dataId;
				this.identity = this.$route.params.identity;
				console.log('userLive:',this.dataId,this.identity);
			},
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getUserLiveBroadcastCoursePage?"+ 'page=' + this.currentpage + '&num=' + this.pagesize +'&name='+this.search+'&userid='+this.userid+'&columnid='+this.searchSelect+'&isRequired='+this.isRequired,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1
							}
						}
					}
				});
			},
			handleData(row){
				this.$router.push({
					name: 'userLiveData',
					params: {
						courseid:row.id,
						userid: this.userid,
						updateTitle:this.updateTitle,
						courseName: row.courseName
					}
				})
			},
			draw(){
  				let myChartDrawer = echarts.init(this.$refs.echarts);
                var option = {
                	xAxis: {
                        data: ['作业', '视频', '直播', '文件'],
                        axisLabel: {
                        	interval: 0,
                        }
                    },
                    // Y轴
                    yAxis: {
                    	axisLabel : {
				            formatter: function(){
				                return "";
				            }
				        }
                    },
                    grid: {
				        x: '3%', 
				    },
                    // 数据
                    series: [{
                        type: 'bar',
                        barWidth : 30,
                        itemStyle: {   
            				normal:{  
				                color: function (params){
				                    var colorList = ['#f60','#51c332','#5384e4','#39b3be'];
				                    return colorList[params.dataIndex];
				                },
				                label: {
									show: true,
									position: 'top', 
									textStyle: {
										color: 'black',
										fontSize: 12
									}
								}
				            },
        				},
        				data: this.echartsData,
                    }]
                };
                myChartDrawer.setOption(option);
            },
			handleWareData(row){
				this.echartsPopup=true;
				this.echarts_people = this.updateTitle;
				this.echarts_courseName = row.courseName;
				this.$ajax({
                    url: this.$root.jifuUrl + '/mns/coursewareGroup/coursewareOwnLearningData',
					headers:{'ContentType': 'application/json; charset=utf-8'},
                    method: 'POST',
                    data:{
						courseid:row.id,
						userId:this.userid
					},
                    success: res => {
                        if(res.data.code == 200) {
							this.learningprogress = res.data.data.learningprogress;
							this.chaozongxueyuanbi = res.data.data.chaozongxueyuanbi;
							this.wanchenglv = res.data.data.wanchenglv;
                        }else{
							this.echartsPopup = false;
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
                    }
                });
				this.$ajax({
                    url: this.$root.jifuUrl + '/mns/coursewareGroup/coursewareGroupLearningprogressClassify',
                    headers:{'ContentType': 'application/json; charset=utf-8'},
                    method: 'POST',
                    data:{
						courseid:row.id,
						userId:this.userid
					},
                    success: res => {
						console.log(res);
                        if(res.data.code == 200) {
							this.echartsData[0] = res.data.data.zuoye;
							this.echartsData[1] = res.data.data.shipin;
							this.echartsData[2] = res.data.data.zhibo;
							this.echartsData[3] = res.data.data.wenjian;
							this.draw();
                        }else{
							this.liveDataWrap = false;
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
                    }
                });
			},
			echartDataClose(){
				this.echartsPopup = false;
			},
			userLubo(){
				this.$router.push({
					name: 'soTeacher',
					params: {
						userid: this.userid,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			knowMap(){
				this.$router.push({
					name: 'userKnowledgeMap',
					params: {
						userId: this.userid,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			courseHomework(){
				this.$router.push({
					name: 'userHomework',
					params: {
						userId: this.userid,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			userTask(){
				this.$router.push({
					name: 'userTask',
					params: {
						userId: this.userid,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				});
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			getTreeData(data){
				for(var i=0;i<data.length;i++){
					if(data[i].childList.length<1){
						data[i].childList=undefined;
					}else {
						this.getTreeData(data[i].childList);
					}
				}
				return data;
        	},
			importDaoChu(){},
			reBack(){
				this.$router.push({
					name:'userManager',
					params: {
						identity:1,
						dataId:this.dataId
					}
				})
			},
			getColumnList(){
				let columnType = [5];
				this.$rootFunction().columnList({columnType});
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted() {
			this.getParams();
			if(this.userid==null){
				this.$store.commit('GET_USERLIVE');
				var s =this.$store.state.userLiveState;
				this.updateTitle=s.updateTitle;
				this.userid=s.userid;
				this.identity = s.identity;
				this.dataId = s.dataId
			};
			this.getTableList();
			this.getColumnList();
			window.addEventListener("beforeunload",()=>{
				s={
					updateTitle:this.updateTitle,
					userid : this.userid,
					dataId:this.dataId,
					identity:this.identity
				}
				this.$store.commit('SET_USERLIVE', s);
			});
		}
	}
</script>

<style>
	.userLive .advise{border: 1px solid #44CEF6;box-sizing: border-box;}
	.userLive .el-tabs-report a{margin-left: 10px;}
	.userLive .el-tabs-report a.listOne{position: relative;top: -1px;}
	.userLive .el-tabs-report a.listTwo:nth-child(1){margin-left: 0;}
</style>